import { EComp } from '@/consts';
import {
    Button, Cascader, CascaderProps, DatePicker, DatePickerProps, Form, FormInstance, FormItemProps, FormProps, Grid, Input, InputNumber, InputNumberProps, InputProps, Radio, RadioGroupProps, RangePickerProps, Select, SelectProps, Switch, SwitchProps, TreeSelect, TreeSelectProps, Upload, UploadProps, YearPickerProps
} from '@arco-design/web-react';
import { IconRefresh, IconSearch } from '@arco-design/web-react/icon';
import { memo, ReactElement } from 'react';
import './index.scss';

const { Row, Col } = Grid;
const { useForm } = Form;
const { YearPicker, RangePicker } = DatePicker;


interface IProps {
    /**
     * 表单实例
     */
    form?: FormInstance;
    /**
     * 表单值变化
     */
    onFormValuesChange?: (now: Record<string, any>, values: Record<string, any>) => void;
    /**
     * 搜索回调
     */
    onSearch: (values: Record<string, any>) => void;
    /**
     * 表单字段
     */
    fields: IFormItemSchema[];
    /**
     * 表单参数
     */
    formProps?: FormProps;
    /**
     * 禁用
     */
    disabled?: boolean;

    showElem?: boolean;

    labelCol?: number;

    wrapperCol?: number;
}

/**
 * 搜索面板
 * @returns 
 */
function SearchForm(props: IProps) {
    const { onSearch, fields, formProps = {}, disabled = false, onFormValuesChange, form: formProp, showElem: showElem = true, labelCol = 3,wrapperCol = 20 } = props;

    const [form] = useForm();

    /**
     * 搜索
     */
    const handleSubmit = () => {
        (formProp || form).validate().then(values => {
            onSearch(values);
        });
    };

    /**
     * 重置
     */
    const handleReset = () => {
        (formProp || form).resetFields();
        (formProp || form).validate().then(values => {
            onSearch(values);
        });
    };

    /**
     * 表单值变化
     */
    const onFormChange = (now: any, values: any) => {
        onFormValuesChange && onFormValuesChange(now, values);
    }

    return (
        showElem ? <div id="search-form" className="search-form">
            <Form
                form={formProp || form}
                labelAlign="left"
                labelCol={{ span: labelCol }}
                wrapperCol={{ span: wrapperCol }}
                onValuesChange={onFormChange}
                {...formProps}
            >
                <Row gutter={24}>
                    {
                        fields.map(item => {
                            let comp: ReactElement;
                            const itemProps = item.comp.props ?? {} as any;
                            switch (item.comp.type) {
                                case EComp.INPUT:
                                    comp = <Input {...itemProps} />;
                                    break;
                                case EComp.NUMBER:
                                    comp = <InputNumber {...itemProps} />;
                                    break;
                                case EComp.PWD:
                                    comp = <Input.Password {...itemProps} />;
                                    break;
                                case EComp.SELECT:
                                    comp = <Select {...itemProps} />
                                    break;
                                case EComp.TXT:
                                    comp = <div>{itemProps.content || itemProps.placeholder}</div>
                                    break;
                                case EComp.SWITCH:
                                    comp = <Switch {...itemProps} />
                                    break;
                                case EComp.RADIO:
                                    comp = <Radio.Group {...itemProps} />
                                    break;
                                case EComp.UPLOAD:
                                    comp = <Upload {...itemProps} />
                                    break;
                                case EComp.DATE_PICKER:
                                    comp = <DatePicker {...itemProps} />
                                    break;
                                case EComp.SELECT_TREE:
                                    comp = <TreeSelect {...itemProps} />
                                    break;
                                case EComp.YEAR_PICKER:
                                    comp = <YearPicker {...itemProps} />
                                    break;
                                case EComp.RANGE_PICKER:
                                    comp = <RangePicker {...itemProps} />
                                    break;
                                case EComp.Cascader:
                                    comp = <Cascader {...itemProps} />
                                    break;
                            }
                            const key = Array.isArray(item.props.field) ? item.props.field.join('-') : item.props.field as string;
                            return (
                                <Col key={key} span={12}>
                                    <Form.Item {...item.props}>
                                        {comp!}
                                    </Form.Item>
                                </Col>
                            );
                        })
                    }
                </Row>
            </Form>
            <div className="actions">
                <Button type="primary" icon={<IconSearch />} disabled={disabled} onClick={handleSubmit}>
                    搜索
                </Button>
                <Button icon={<IconRefresh />} onClick={handleReset}>
                    重置
                </Button>
            </div>
        </div> : null
    );
}

/**
 * form.item配置
 */
export interface IFormItemSchema {
    /**
     * 组件配置
     */
    comp: IFormItemRadio | IFormItemSelectTree | IFormItemDatePicker | IFormItemUpload | IFormItemInputComp | IFormItemPwdComp | IFormItemSelect | IFormItemTxt | IFormItemSwitch | IFormItemInputNumComp | IYearPicker | IRangePicker | {
        type: EComp.Cascader,
        props?: CascaderProps
    };
    /**
     * form.item属性
     */
    props: FormItemProps;
}

/**
 * input组件
 */
export interface IFormItemInputComp {
    /**
     * Input组件
     */
    type: EComp.INPUT;
    /**
     * Input组件属性
     */
    props?: InputProps;
}


/**
 * input number组件
 */
export interface IFormItemInputNumComp {
    /**
     * Input number组件
     */
    type: EComp.NUMBER;
    /**
     * Input number组件属性
     */
    props?: InputNumberProps;
}

/**
 * 密码框组件
 */
export interface IFormItemPwdComp {
    /**
     * Input.password组件
     */
    type: EComp.PWD;
    /**
     * Input.password组件属性
     */
    props?: InputProps;
}

/**
 * 下拉框组件
 */
export interface IFormItemSelect {
    type: EComp.SELECT;
    props?: SelectProps
}

/**
 * 文本组件
 */
export interface IFormItemTxt {
    type: EComp.TXT;
    props: { content?: string, placeholder?: string };
}

/**
 * switch组件
 */
export interface IFormItemSwitch {
    type: EComp.SWITCH,
    props?: SwitchProps
}

/**
 * 单选项组件
 */
export interface IFormItemRadio {
    type: EComp.RADIO,
    props?: RadioGroupProps
}

/**
 * 上传组件
 */
export interface IFormItemUpload {
    type: EComp.UPLOAD,
    props?: UploadProps
}

/**
 * 日期组件
 */
export interface IFormItemDatePicker {
    type: EComp.DATE_PICKER,
    props?: DatePickerProps
}

/**
 * 树选择
 */
export interface IFormItemSelectTree {
    type: EComp.SELECT_TREE,
    props?: TreeSelectProps
}

/**
 * 年份选择
 */
export interface IYearPicker {
    type: EComp.YEAR_PICKER,
    props?: YearPickerProps
}

/**
 * 范围选择
 */
export interface IRangePicker {
    type: EComp.RANGE_PICKER,
    props?: RangePickerProps
}

export default memo(SearchForm);
